<template>
    <TechDialog ref="remark" title="退货备注" extClass="shop-after-sale-remark-dailog" @ok="resetRemark" :mode="mode" :theme="theme" :styleMode="styleMode" container="body">
        <div class="remark-content">
            <Field :class="`review-remark-field border-black-color ${mode}`" v-model="remark" type="textarea" placeholder="请填写备注" @blur="inputOnBlur" :autofocus="true" :maxlength="50" />
            <span class="review-remark-length">{{remarkLength}} / 50个字</span>
        </div>
    </TechDialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Field } from 'vant';
import { TechDialog } from '@components/base';
import { inputBlurAction } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'ServerRemark', // 售后备注
    mixins: [ModeMixin],
    components: {
        Field,
        TechDialog,
    },
    props: {
        defaultRemark: {
            type: String,
            default: '',
        },
    },
    computed: {
        ...mapState({
            afterSaleRemark: state => state.shopOrder.afterSaleRemark,
        }),
        remarkLength() {
            return this.remark.length || 0;
        },
    },
    data() {
        return {
            remark: '',
        };
    },
    methods: {
        ...mapActions([
            'changeAfterSaleRemark',
        ]),
        show() {
            this.remark = this.$props.defaultRemark;
            this.$refs.remark.show();
        },
        inputOnBlur() {
            inputBlurAction();
        },
        resetRemark() {
            this.$emit('ensure', this.remark);
            this.remark = '';
        },
    },
};
</script>

<style lang="less">
.shop-after-sale-remark-dailog {
    .remark-container {
        font-size: @shop-font-size;
        color: @tip-color;
        opacity: .7;
        .flex-row-center();
        .remark-value {
            max-width: 180px;
            .text-overflow();
        }
    }
    .dialog-content {
        width: calc(100% - 2 * @shop-gap-md);
    }
    .remark-content {
        position: relative;
        // background-color: aquamarine;
        .review-remark-field {
            width: 100%;
            height: 98px;
            border: @border;
            border-radius: @border-radius;
            &::after {
                height: 0;
                border: none;
            }
            &.black {
                .van-field__control {
                    color: @white !important;
                }
            }
        }
        .review-remark-length {
            position: absolute;
            bottom: @gap;
            right: @gap;
            color: @tip-color;
            opacity: .7;
            font-size: @shop-font-size-sm;
        }
    }
}
</style>
